<template>
	<view class="container container01">
		<!--头部start-->
		<view class="header">
			<u-status-bar></u-status-bar>
			<view class="con">
				<image src="/static/images/back.png" mode="widthFix" class="back"></image>
				<view class="tit">兑换广告机</view>
			</view>
		</view>
		<u-status-bar></u-status-bar>
		<!--头部end-->
		
		<!--广告机start-->
		<view class="credit">
			<view class="my_num">
				<view class="tops">
					<text>当前可用资产</text>
					<view class="adc_total">{{ moneyFormat('4,083') }} ADC</view>
					<view class="cny_total">可兑换广告机 : {{ moneyFormat('2600') }} CNY</view>
					<view class="eye" :class="[showPassword==true?'':'on']" :name="eyeIconName" @click="eyeIconName == 'eye-off' ? (eyeIconName = 'eye') : (eyeIconName = 'eye-off')"></view>
				</view>
				<view class="classvip">
					<view class='one'>我的会员等级<text>三星会员</text></view>
					<view class='two'>可兑换广告机<text>100~600CPM</text></view>
				</view>
			</view>
			<view class="conversion_list">
				<view class="on" v-for="(item,index) in list" :key="index" :class="current==index?'active':''" @tap="current=index">{{item.price}}</view>
			</view>
		</view>	
		<!--广告机end-->
		
		<!--底部start-->
		<view class="f_btn">
		 	<button class="submit on"  @tap="open_box">兑换</button>
		 	<u-safe-bottom></u-safe-bottom>
		 </view>
		<u-safe-bottom></u-safe-bottom>
		<!--底部end-->
		
		<!--弹窗start-->
		<u-modal :show="tis_box" :confirmText="confirmText" confirmColor="#757475" @confirm="confirm">
			<view class="box_content">
				<image src="/static/images/img_10.png" mode="widthFix" class="b_img"></image>
				<view class="slot-content">
					<rich-text :nodes="content"></rich-text>
				</view>
			</view>
		</u-modal>
		
		<u-popup :show="gj_box" mode="bottom" :closeOnClickOverlay="true" @close="gj_popup_close" customStyle="background: none">
			<view class="true_name-box">
				<image src="/static/images/img_31.png" @tap="gj_popup_close()"></image>
				<view class="tit">兑换广告机<text>500 CPM</text></view>
				<view class="con">将锁仓: <text>500 ADC</text></view>
				<view class="forgot">
					<view>输入交易密码<text>忘记密码 ？</text></view>
					<u-code-input v-model="cusname" dot :maxlength="6" space="0" size="85rpx" fontSize="40rpx" :focus="true" color="#332C2B" @finish="finish" class="codeInput"></u-code-input>
					<u-safe-bottom></u-safe-bottom>
				</view>
				<u-keyboard mode="number" ref="uKeyboard" @change="valChange" @backspace="backspace" :tooltip="tooltip" :dotDisabled="true" :show="keyboard_show"></u-keyboard>
			</view>
		</u-popup>
		
		<u-popup mode="bottom" :show="success_box" :closeOnClickOverlay="true" @close="succees_popup_close" customStyle="background: none" >
			<view class="success_box">
				<image src="/static/images/img_11.png"></image>
				<view class="con">广告机已兑换<text>正转至“待激活”页面</text></view>
			</view>
		</u-popup>
		<!--弹窗end-->
	
	</view>
</template>

<script>
	export default {
	    data() {
	        return {
				eyeIconName: 'eye',
				showPassword: false,
				gj_box:false,
				tis_box: false,
				success_box: false,
				content:'账户可用资金不足，请重新选择广告<br/>机功率！',
				confirmText:"关闭",
				current: 0,
				list: [
					{ price: '100CPM' },
				    { price: '200CPM' },
				    { price: '300CPM' },
				    { price: '400CPM' },
				    { price: '500CPM' },
				    { price: '600CPM' },
				    { price: '700CPM' },
				    { price: '800CPM' },
				    { price: '900CPM' },
				    { price: '1000CPM' },
				],
				keyboard_show:true,
				tooltip:false,
				overlayOpacity: 0.8,
				cusname:"",
	        }
	    },
	    methods: {
			checkIndex(index) {
				console.log(index)
				this.navIndex = index;
			},
			open_box(){
				this.gj_box = true
			},
			gj_popup_close(){
				this.gj_box = false
			},
			confirm(){
				this.tis_box = false
			},
			succees_popup_close(){
				this.success_box = false
			},
			change(e,item) {
				this.count = e,
				this.tel_show = false,
				this.c_name = item.name,
				this.c_img = item.url
			},
			valChange(val) {
				this.cusname += val;
				if(this.cusname.length>=6){
					this.gj_box =false,
					this.success_box = true
				}
			},
			backspace(){
				if(this.cusname.length) this.cusname = this.cusname.substr(0, this.cusname.length - 1);
			},
			finish(e){
				this.gj_box =false,
				this.success_box = true
			}
	    },
		computed: {
			// 格式化金额，等位数转换为星
			moneyFormat(e) {
				return e => {
					if (e || e == 0) {
						e = e.toString();
					}
					if (e && this.eyeIconName == 'eye-off') {
						this.showPassword = true;
						let temp = [];
						e.split('').forEach(item => {
							temp.push('*');
					});
					return temp.join('');
					} else {
						this.showPassword =false;
						parseFloat(e)
						.toFixed(2)
						.replace(/(\d)(?=(\d{3})+\.)/g, '$1,');
						return e;
					}
				};
			},
		},
	}
</script>
<style lang="scss">
	@import url("../../common/style.scss");
	@import url("machine.scss");
</style>